<template>
  <a-modal
    :title="'查看详情'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <a-table
      bordered
      :loading="loading"
      :columns="columns"
      :data-source="dataSource"
    >
      <template
        slot="action"
        slot-scope="txt, record"
      >
        <a
          class="mr-10"
          @click="tosubmit(record)"
        >
          编辑
        </a>
      </template>
    </a-table>
    <a-modal
      v-model="visible"
      title="编辑"
      :footer="null"
      @cancel="visible=false"
    >
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item label="波段">
                <a-input
                  allow-clear
                  placeholder="请输入波段"
                  v-decorator="[`band`]"
                />
              </a-form-item>
              <a-form-item label="色号">
                <a-input
                  allow-clear
                  placeholder="请输入色号"
                  v-decorator="[`code`]"
                />
              </a-form-item>
              <a-form-item label="版次单据号">
                <a-input
                  allow-clear
                  :disabled="true"
                  placeholder="请输入版次单据号"
                  v-decorator="[`editionBillNo`]"
                />
              </a-form-item>
              <a-form-item label="主料号">
                <a-input
                  allow-clear
                  placeholder="请输入主料号"
                  v-decorator="[`materialCode`]"
                />
              </a-form-item>
              <a-form-item label="代用料编号">
                <a-input
                  allow-clear
                  placeholder="请输入代用料编号"
                  v-decorator="[`replaceMaterialCode`]"
                />
              </a-form-item>
              <a-form-item label="第几件">
                <a-input
                  allow-clear
                  :disabled="true"
                  placeholder="请输入第几件"
                  v-decorator="[`sortNumber`]"
                />
              </a-form-item>
              <a-row>
                <a-col
                  :span="16"
                  :offset="8"
                  class="info-action"
                >
                  <a-button @click="closeForm">
                    取消
                  </a-button>
                  <a-button
                    :style="{ marginLeft: '8px' }"
                    type="primary"
                    html-type="submit"
                  >
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </a-modal>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'

const columns = [
  {
    title: '波段',
    dataIndex: 'band',
  },
  {
    title: '色号',
    dataIndex: 'colorCode',
  },
  {
    title: '版次单据号',
    dataIndex: 'editionBillNo',
  },
  {
    title: '版次编号',
    dataIndex: 'editionCode',
  },
  {
    title: '面料',
    width: 150,
    dataIndex: 'materialCode',
  },
  {
    title: '代用面料',
    width: 110,
    dataIndex: 'replaceMaterialCode',
  },
  {
    title: '样衣号',
    dataIndex: 'sampleCode',
  },
  {
    title: '第几件',
    dataIndex: 'sortNumber',
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  components: {},

  props: {
    content: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      columns,
      loading: false,
      visible: false,
      patt: 'api/gateway/basemgt-op',
      dataSource: [],
      info: {},
      index:null,
      formItemLayout: {
        labelCol: {
          xl: { span: 6 },
          xs: { span: 5 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xl: { span: 17 },
          xs: { span: 12 },
          sm: { span: 12 },
        },
      },
      form: this.$form.createForm(this),
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      console.log(this.content)
      const params = {
        editionBillNo: this.content.editionBillNo,
        editionCode: this.content.editionCode,
        sortNumber: this.content.sortNumber,
      }
      try {
        postAction(`${this.patt}/extendcolor/detail`, params).then((data) => {
          if (data.code == 200) {
            this.dataSource = data.data
          } else {
            this.$message.warning('获取列表失败！')
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    tosubmit(record) {
      this.visible = true
      this.info = record
      this.index = record.indexNo
      this.$nextTick(() => {
        this.form.setFieldsValue({
          band: record.band,
          code: record.colorCode,
          materialCode: record.materialCode,
          replaceMaterialCode: record.replaceMaterialCode,
          sortNumber: record.sortNumber,
          editionBillNo: record.editionBillNo,
        })
      })
    },
    closeForm() {
      this.info = {}
      this.form.resetFields()
      this.visible = false
      this.loadData()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    submit(values) {
      const params = values
      params.index = this.index
      try {
        postAction(`${this.patt}/extendcolor/update/detail`, params).then((data) => {
          if (data.code == 200) {
             this.$message.success('提交成功')
             this.closeForm()
          } else {
            this.$message.warning('提交失败！')
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    reset() {
      this.$emit('closeDetail')
    },
  },
}
</script>

<style scoped lang="less">
.printcard {
  margin-top: 40px;
  border: 1px solid #d9d9d9;
  padding: 20px;
}
@media print {
  .printcard {
    border: none !important;
  }
  .page-break:not(:last-child) {
    page-break-after: always;
  }

  // @page {
  //   margin:0;
  // }
}
</style>
<style>
@media print {
  body {
    height: auto;
  }
}
</style>
